<template>
    <div class="description-container">
        <div class="description-left" >
            <div class="item-label" v-for="(label, index) in labels" :key="index">
                {{ label.name }}
            </div>
        </div>
        <div class="description-right">
            <div class="description-right-container" v-for="(label, index) in labels" :key="index">
                <div class="item-value ellipsis" v-for="(sigleData, index) in data" :key="index">
                    {{ label.render ? label.render(sigleData[label.key]) :
                        sigleData[label.key] }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {
        labels: Array,
        data: Array
    },
    data() {
        return {
        }
    },
    computed: {

    },
    watch: {
        data() {
            console.log('this.', this.data)
        }
    },
    mounted() {
    },
    methods: {

    }
};
</script>
<style lang='scss' scoped>
.description-container {
    width: 100%;
    border: #e6e6e6 1px solid;
    overflow-x: auto;
}

.description-left {
    width: 100px;
    float: left;
}

.description-right {
    float: right;
    overflow-x: auto;
    width: calc(100% - 100px);
}

.description-right-container{
    display: flex;
}

.item-label {
    width: 100px;
    background-color: #f8f8f8;
    border-right: #e6e6e6 1px solid;
    border-bottom: #e6e6e6 1px solid;
    text-indent: 1;
    padding: 15px 5px;
    box-sizing: border-box;
}

.item-value-container {
    width: calc(100% - 100px);
    display: flex;
    overflow-x: auto;
}

.item-value {
    flex: 1;
    border-right: #e6e6e6 1px solid;
    border-bottom: #e6e6e6 1px solid;
    text-indent: 1;
    padding: 15px 5px;
    box-sizing: border-box;
    min-width: 200px;
}

.ellipsis {
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 使用省略号表示文本溢出 */
}
</style>